<template>
<div class="gvb_admin">
  <aside>
    <div class="gvb_logo">
      <img src="/image/logo.jpg" alt="图片加载失败">
      <div class="logo_head">
        <div>晓晓知道</div>
        <div>xiaoxiaozhidao</div>
      </div>
    </div>
    <div class="gvb_menu">
      <a-menu
          :default-open-keys="['0']"
          :default-selected-keys="['0_2']"
      >
        <template v-for="item in menuList" :key="item.key">
          <a-menu-item :key="item.key" v-if="item.child?.length === 0">
            {{item.title}}
            <template #icon>
              <component :is="item.icon"></component>
            </template>
          </a-menu-item>
          <a-sub-menu :key="item.key" v-if="item.child?.length !== 0">
            <template #icon>
              <component :is="item.icon"></component>
            </template>
            <template #title>
              {{item.title}}
            </template>
            <a-menu-item v-for="sub in item.child" :key="sub.key">
              {{sub.title}}
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </div>
  </aside>
  <main class="gvb_main">
<!--    头部区域-->
    <div class="gvb_head">
<!--      左侧面包屑模块-->
      <div class="gvb_head_breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>HOME</a-breadcrumb-item>
          <a-breadcrumb-item>ARTICLE</a-breadcrumb-item>
          <a-breadcrumb-item>ARTICLE_LIST</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
<!--      右侧功能模块-->
      <div class="gvb_function_area">
        <IconMenu class="gvb_icon"/>
        <div class="gvb_theme">
          <IconSun class="gvb_icon"/>
        </div>
        <div class="gvb_user_info_menu">
          <a-dropdown>
            <div class="gvb_user_info_menu_dropdown">
              <img src="/image/logo.jpg">
              <span>xiaoxiao</span>
              <IconDown/>
            </div>
            <template #content>
              <a-doption>Option 1</a-doption>
              <a-doption disabled>Option 2</a-doption>
              <a-doption>Option 3</a-doption>
              <a-doption>Option 4</a-doption>
              <a-doption>Option 5</a-doption>
              <a-doption>Option 6</a-doption>
              <a-doption>Option 7</a-doption>
              <a-doption>Option 8</a-doption>
              <a-doption>Option 9</a-doption>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>
    <div class="gvb_tabs">
      <div class="gvb_tab active">首页</div>
      <div class="gvb_tab">用户管理</div>
      <div class="gvb_tab">文章管理</div>
    </div>
    <div class="gvb_container">
      <RouterView />
    </div>
  </main>
</div>
</template>

<script setup lang="ts">
import {RouterView} from "vue-router";
import {
  IconMenuFold,
  IconMenuUnfold,
  IconApps,
  IconBug,
  IconBulb,
  IconMenu,
  IconSun,
  IconDown, IconHome, IconUser,
} from '@arco-design/web-vue/es/icon';
import type {Component} from "vue";

interface MenuType {
  key:string
  title:string
  icon?:Component
  name?:string
  child?:MenuType[]
}

const menuList:MenuType[] = [
  {key:'1',title:'首页',icon:IconHome,name:'home',child:[]},
  {key:'2',title:'个人中心',icon:IconHome,name:'user_center',child:[
      {key:'2-1',title:'我的信息',icon:IconUser,name:'user_info'}
    ]
  },
  {key:'3',title:'文章管理',icon:IconHome,name:'article',child:[
      {key:'3-1',title:'文章列表',icon:IconUser,name:'article_list'}
    ]
  },
  {key:'4',title:'用户管理',icon:IconHome,name:'users',child:[
      {key:'4-1',title:'用户列表',icon:IconUser,name:'user_list'}
    ]
  },
  {key:'5',title:'群聊管理',icon:IconHome,name:'chat_group',child:[
      {key:'5-1',title:'消息列表',icon:IconUser,name:'chat_list'}
    ]
  },
  {key:'6',title:'系统管理',icon:IconHome,name:'system',child:[
      {key:'6-1',title:'菜单管理',icon:IconUser,name:'menu_list'}
    ]
  },
]
</script>

<style lang="scss">
.gvb_admin{
  display: flex;
  height: 100vh;
  aside{
    width: 240px;
    border-right: 1px solid var(--bg);
    .gvb_logo{
      height: 90px;
      padding: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--bg);
      img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      .logo_head{
        margin-left: 20px;
        div:nth-child(1){
          font-size: 22px;
        }
        div:nth-child(2){
          font-size: 12px;
        }
      }
    }

  }
  .gvb_main{
    width: calc(100% - 240px);
    .gvb_head{
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid var(--bg);
      justify-content: space-between;
    }
    .gvb_function_area{
      display: flex;
      align-items: center;
      .gvb_icon{
        margin-right: 10px;
      }
      .gvb_user_info_menu{
        .gvb_user_info_menu_dropdown{
          display: flex;
          align-items: center;
          img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
        }
      }
    }
    .gvb_tabs{
      height: 30px;
      width: 100%;
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid var(--bg);
      .gvb_tab{
        padding: 2px 8px;
        margin-right: 10px;
        border: 1px solid var(--bg);
        border-radius: 3px;

        &.active{
          background-color: var(--active);
          border: none;
          color: #fff;
        }
      }
    }
    .gvb_container{
      padding: 20px;
      min-height:calc(100% - 90px);
    }
  }
}
</style>